function $(selector){
    return document.querySelector(selector)
}
function $ALL(selector){
    return document.querySelectorAll(selector)
}
let add=document.getElementById('add'),
add_role=document.getElementById('add_role'),
masking=document.querySelector('.masking'),
cancel=document.getElementById('cancel'),
id;
add.onclick=function(){
    $('#submit').style.display="inline-block"
    $('#alter').style.display="none"
    $('#add_role .title').innerHTML='添加角色'
    add_role.style.display='block'
}
cancel.onclick=masking.onclick=function(){
    add_role.style.display='none'
}
axios.get('https://ty.php800.cn/api/member/role.php',{
    // params:{
    //     userid:JSON.parse(localStorage.user).id
    // },
    headers:{
        // TOKEN: localStorage.getItem('token'),
        SAT:'1234567'
    }
}).then((res)=>{
    for(let i=0;i<res.data.role.length;i++){
        let {id,rolename,roleauth}=res.data.role[i]
        roleauth=roleauth.replace(/SystemIndex/,'系统操作权限')
        roleauth=roleauth.replace(/MemberIndex/,'人员操作权限')
        roleauth=roleauth.replace(/ArticleIndex/,'角色操作权限')
        let row=document.createElement('div')
        row.classList.add('row')
        row.innerHTML=`
            <div class="message">
                <div class="id">${id}</div>
                <div class="rolename">${rolename}</div>
                <div class="jurisdiction">${roleauth}</div>
            </div>
            <div class="operation">
                <a href="javascript:" class="alter">修改</a>|<a href="javascript:" class="remove">删除</a>
            </div>
        `
        document.querySelector('.main').appendChild(row)
    }
    var roleauth=document.getElementsByName('roleauth'),
    submit=document.getElementById('submit'),
    role_name=document.getElementById('role_name'),
    submit_arr=new Array();
    for(let i=0;i<$ALL('.remove').length;i++){
        $ALL('.remove')[i].onclick=function(){
            axios.get('https://ty.php800.cn/api/member/roledel.php',{
                params:{
                    id:$ALL('.id')[i+1].innerHTML
                },
                headers:{
                    // TOKEN: localStorage.getItem('token'),
                    SAT:'1234567'
                }
            }).then((res)=>{
                location.reload();
            })
        }
    }
    for(let i=0;i<$ALL('.alter').length;i++){
        $ALL('.alter')[i].onclick=function(){
            $('#add_role .title').innerHTML='修改角色'
            add_role.style.display='block'
            $('#submit').style.display="none"
            $('#alter').style.display="inline-block"
            id=$ALL('.id')[i+1].innerHTML;
        }
    }
    $('#alter').onclick=function(){
        submit_arr=[]
        for(let i=0;i<roleauth.length;i++){
            if(roleauth[i].checked){
                submit_arr.push(roleauth[i].value)
            }
        }
        console.log(submit_arr)
        let formdata=new FormData();
        formdata.append('rolename',role_name.value)
        formdata.append('roleauth',submit_arr)
        formdata.append('id',id)
        axios.post('https://ty.php800.cn/api/member/roleedit.php',formdata,{
            headers:{
                // TOKEN: localStorage.getItem('token'),
                SAT:'1234567'
            }
        }).then((res)=>{
            console.log(res)
        })
    }
    submit.onclick=function(){
        submit_arr=[]
        for(let i=0;i<roleauth.length;i++){
            if(roleauth[i].checked){
                submit_arr.push(roleauth[i].value)
            }
        }
        let formdata=new FormData();
        formdata.append('rolename',role_name.value);
        formdata.append('roleauth',submit_arr);
        axios.post('https://ty.php800.cn/api/member/roleadd.php',formdata,{
            headers:{
                // TOKEN: localStorage.getItem('token'),
                SAT:'1234567'
            }
        }).then((res)=>{
            if(res.data.verify){
                location.reload();
            }
        })
    }
})